<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Study Timer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <link rel="stylesheet" href="../assets/css/StudyTimer.css">
    <link rel="icon" href="../assets/Images/StudyTimer.svg">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@1,300&family=Cookie&family=Lato&display=swap" rel="stylesheet">
</head>
<body>
    <nav class='navbar'>
        <header class='page-header'>
            <h1 class='animate__animated animate__lightSpeedInLeft page-header-txt'>
                Study Timer
            </h1>
        </header>
        <div class="dropdown">
            <button class="dropbtn">Session Details &Darr;</button>
            <div class="dropdown-content">
                <div id="session_displayer">

                </div>
            </div>
        </div>
    </nav>
    <main class='page-main '>
        <div class="customize">
            <button id='font-1' class="customize-content">
                Font 1
            </button>
            <button id='font-2' class="customize-content">
                Font 2
            </button>
            <button id="font-3" class="customize-content">
                Font 3
            </button>
            <button id='theme-1' class="customize-content">
                Theme-1
            </button>
            <button id='theme-2' class="customize-content">
                Theme -2
            </button>
            <button id='theme-3' class="customize-content">
                Theme -3
            </button>
        </div>
        <div class="row">
            <!-- pomodoro clock --------------- 2/3 parts--------------- -->
            <div class="col-2-of-3">

                <div class="settings-block">
                    <div id='break' class='block'>
                        <div id="break-settings">
                            <h4 class='label_heading'>
                                Break Length
                            </h4>
                            <button id="break-increment" class='icons'>&Uarr;</button>
                            <span id='break-length'> 5</span>
                            <button id="break-decrement" class='icons'>&Darr;</button>
                        </div>
                    </div>
                    <div id='session' class='block'>
                        <div id="session-settings">
                            <h4 class='label_heading'>
                                Session Length
                            </h4>
                            <button id="session-increment" class='icons'>&Uarr;</button>
                            <span id='session-length'> 25</span>
                            <button id="session-decrement" class='icons'>&Darr;</button>
                        </div>
                    </div>
                </div>

                <div id='timer' class='block'>
                    <div id="timer-box">
                        <div id="timer-box-session">
                            <h5 id='timer-label'>
                                Session
                            </h5>
                            <span id='time-left'>
                                <span id="time-left-mins">25</span>:
                                <span id="time-left-secs">00</span>
                            </span>
                        </div>
                        <div id="timer-box-break">
                            <h5 id='break-timer-label'>
                                Break
                            </h5>
                            <span id='break-time-left'>
                                <span id="break-time-left-mins">05</span>:
                                <span id="break-time-left-secs">00</span>
                            </span>
                        </div>
                    </div>
                    <div id="timer-settings">
                        <button id="start-stop" class='icons-larger'>&RightTriangleBar;</button>
                        <button id="reset" class='icons-large'>&olarr;</button>
                    </div>
                </div>
            </div>
            <!-- end of pomodoro---------------------------------------------- -->
            <div class="col-1-of-3">
                <h4 class="label_heading session_planner-heading">
                    Session Planner
                </h4>
                <div id="planner" class="planner">
                    <label class='label_heading_small' for="aim_bar">Enter your goal for this session</label><br>
                    <textarea id='aim_bar'class="aim_bar" name='goals' type="text" rows='5' cols='25' placeholder="enter your goals (seperated by '-')                      - goal one  - goal two" required></textarea>
                    <br>
                    <button id="planner_btn" class="planner-btn">
                        Add Goals
                    </button>
                </div>
            </div>
        </div>

    </main>
    <script src="../assets/js/StudyTimer_1.js"></script>
    <script src="../assets/js/StudyTimer_2.js"></script>
</body>


</html>